Exercise SVG Playground

Motion × anatomy × coaching

Visual direction study

Show the movement. Explain the impact.

Five layouts test how an exercise can communicate motion, muscle involvement, technique, and progression without turning the card into an anatomy textbook.

01

Movement-first split

The animation owns the visual field. Anatomy and explanation sit beside it in a restrained editorial column.

Best for exercise detail
3–1–1 tempo

Highest-value cue

02

Anatomy-first impact card

The body map is the hero. This direction is strongest when the user is choosing exercises by region or reviewing training balance.

Best for muscle discovery

72impact
profile

Risk-aware cue

03

Inspectable motion storyboard

Three frozen poses reduce animation dependence. The user can compare setup, load position, and finish in one glance.

Best for technique learning

Movement description

Impact profile

04

Workout player

A control-plane layout for active sessions. The current movement dominates while the remaining routine behaves like a playlist.

Best during a workout
Current movement

·

Routine queue

05

Coach + progress dashboard

The motion remains central, while technique callouts and a lightweight history view turn the card into a coaching surface.

Best for progression

Position
Control

What these directions are testing

Visual priority

Whether motion, anatomy, routine state, or progress should own the largest area.

Information density

How much coaching context can remain visible before the exercise illustration loses authority.

Progressive disclosure

Which details should be ambient, which should be tappable, and which should wait for an expanded technique view.